<template>
  <app-dialog-form
    title="商品列表"
    :confirm="handleSubmit"
    width="900px"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="form"
      :model="listParams"
      :disabled="listLoading"
      label-width="70px"
      inline
      @submit.prevent="initProducts"
    >
      <el-form-item label="商品分类">
        <el-select
          v-model="listParams.cate_id"
          placeholder="请选择"
          clearable
          @change="initProducts"
        >
          <el-option
            label="全部"
            :value="0"
          />
          <el-option
            v-for="cate in productCates"
            :key="cate.id"
            :label="`${cate.html}${cate.cate_name}`"
            :value="cate.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品搜索">
        <el-input
          v-model="listParams.store_name"
          placeholder="请输入商品名称关键字"
          clearable
          style="width: 300px;"
        >
          <template #append>
            <el-button
              icon="el-icon-search"
              @click="initProducts"
            />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <app-table
      :list="list"
      :list-loading="listLoading"
      :list-config="listConfig"
      :element-table-configs="{
        highlightCurrentRow: true,
        onCurrentChange: handleSubmit
      }"
    />
    <app-pagination
      v-model:page="listParams.page"
      v-model:limit="listParams.limit"
      :list-count="listCount"
      :load-list="initProducts"
      :disabled="listLoading"
    />
  </app-dialog-form>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue'
import type { PropType } from 'vue'
import { ElMessage } from 'element-plus'
import { putCmsRelation } from '@/api/article'
import * as productApi from '@/api/product'
import { Article } from '@/api/types/article'
import { Product, ProductCategory, ProductListParams } from '@/api/types/product'

const props = defineProps({
  item: {
    type: [Object, null] as PropType<Article | null>,
    required: true
  }
})

interface EmitsType {
  (e: 'update:item', value: Article | null): void
  (e: 'success'): void
}

const emit = defineEmits<EmitsType>()
const list = ref<Product[]>([])
const listCount = ref(0)
const productCates = ref<ProductCategory[]>([])
const listLoading = ref(false)
const listConfig = reactive([
  { label: '商品ID', prop: 'id', align: 'center', width: 80 },
  {
    label: '图片',
    prop: 'image',
    formatter: (row: Product) => {
      return (
        <el-image
          style="width: 50px; height: 50px"
          src={ row.image || './src/assets/logo_small.png' }
          preview-src-list={ [row.image] }
          fit="fill"
        ></el-image>
      )
    }
  },
  { label: '商品名称', prop: 'store_name' },
  { label: '商品分类', prop: 'cate_name' }
])
const listParams = ref<ProductListParams>({
  page: 1,
  limit: 15,
  cate_id: 0,
  store_name: ''
})

const initProductCates = async () => {
  const data = await productApi
    .getCategoryTree(1)
  productCates.value = data
}

const initProducts = async () => {
  listLoading.value = true
  const data = await productApi
    .getProducts(listParams.value)
    .finally(() => {
      listLoading.value = false
    })
  list.value = data.list
  listCount.value = data.count
}

const handleDialogOpen = async () => {
  initProducts()
  initProductCates()
}

const handleDialogClosed = () => {
  emit('update:item', null)
  list.value = []
  listCount.value = 0
  productCates.value = []
  listParams.value = {
    page: 1,
    limit: 15,
    cate_id: 0,
    store_name: ''
  }
}

const handleSubmit = async (row: Product) => {
  if (!row) return
  console.log(row)
  const { id } = row
  const params = {
    product_id: id
  }
  if (props.item) {
    await putCmsRelation(params, props.item.id)
    emit('success')
    ElMessage.success('关联成功')
  }
}

</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 55px;
  height: 55px;
  text-align: center;
}
:deep(.avatar-uploader-icon svg) {
  margin-top: 14px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 55px;
  height: 55px;
  display: block;
}
</style>
